<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>授权</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">权限管理</a></li>
            <li><a href="#">角色权限管理</a></li>
            <li><a href="#">授权</a></li>
        </ul>
    </div>
    <div class="formbody" id="box">
        <!-- 工具栏 -->
        <div class="tools">
            <ul class="toolbar">
                <li v-on:click="goback"><span><img src="/images/t04.png" /></span>返回</li>
            </ul>
        </div>
        <form id="uploadForm">
            <div class="formtitle"><span>授权</span></div>
            <template v-for="(item,index) in firstmenuList" :key="item.id">
                <!-- 一级菜单栏开始 -->
                <div v-bind:class="`bdiv${index}`">
                    <div class="formtitle">
                        <input type="checkbox" name="ck" v-model="checkList" v-bind:value="item.id">
                        <strong>{{item.pername}}</strong>
                    </div>
                    <!-- 二级菜单栏开始 -->
                    <div v-bind:class="`sdiv${index}`">
                        <div class="toolsli">
                            <ul class="toollist">
                                <template v-if="secondmenumap[item.id]!=null">
                                    <template v-for="(secondmenumapitem,secondmenumapindex) in secondmenumap[item.id]"
                                        :key="secondmenumapitem.id">
                                        <li>
                                            <input type="checkbox" name="ck" v-model="checkList"
                                                v-bind:value="secondmenumapitem.id">
                                            <a href="#"><img src="/images/i07.png"></a>
                                            <h3>{{secondmenumapitem.pername}}</h3>
                                        </li>
                                    </template>
                                </template>
                            </ul>
                        </div>
                    </div>
                    <!-- 二级菜单栏结束 -->
                </div>
                <!-- 一级菜单栏结束 -->
            </template>
            <!-- 修改按钮 -->
            <input type="button" class="scbtn" v-on:click="updateRoleMenu" value="添加">
        </form>
    </div>
</body>

<script>
    var paras = location.search; //search获得地址中的参数，内容为'?itemId=12'
    var temp = paras.split('=');
    var itemId = temp[1]; //根据参数名"itemId"，获取参数值
    var obj = {
        data () {
            return {
                roleId: '',
                firstmenuList: [], // 所有一级权限
                secondmenumap: {}, // 所有二级权限
                waitroleMenuMap: {}, // 待修改的管理员所拥有的权限
                checkList: [], // 勾选复选款框的数据
            }
        },
        mounted () {
            axios({
                method: 'get',
                url: '/blog/admin/roleMenuPower/' + itemId,
            }).then(function (result) {
                console.log(result);
                vm.roleId = itemId;
                vm.firstmenuList = result.data.data.firstmenuList;
                vm.secondmenumap = result.data.data.secondmenumap;
                vm.waitroleMenuMap = result.data.data.waitroleMenuMap;
                for (const key in vm.waitroleMenuMap) {
                    vm.checkList.push(key);
                }
            });
        },
        methods: {
            updateRoleMenu () {
                if (confirm("确定为当前角色修改权限吗？")) {
                    var check_value = vm.checkList;
                    if (check_value.length == 0) {
                        check_value.push(-1);
                    }
                    axios({
                        method: 'put',
                        url: '/blog/admin/adminMenuPower/' + vm.roleId + "/" + check_value,
                    }).then(function (result) {
                        window.location.reload();
                    });
                }
            },
            goback () {
                window.history.back();
            }
        }
    }
    var vm = Vue.createApp(obj).mount("#box")
</script>

</html>